<template>
	<view>
		<qf-image-cropper :width="400" :height="400" :radius="200" @crop="handleCrop"></qf-image-cropper>
	</view>
</template>
 
<script>
	import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	import {mapState,mapMutations} from "vuex"
	export default {
		data() {
			return {
				uploadProt: getApp().globalData.portUrl + "/public/index.php/port/Users/upload"
			};
		},
		computed: {
			...mapState("m_user",['userInfo']),
		},
		components: {
			QfImageCropper
		},
		methods: {
			...mapMutations("m_user",["updateUserInfo"]),
			handleCrop(e) {
				var _this = this;
				//上传文件
				uni.uploadFile({
					url:_this.uploadProt,
					filePath:e.tempFilePath,
					name:"file",
					formData:{
						"id":_this.userInfo.id,
					},
					success:(uploadFileRes)=>{
						var res = JSON.parse(uploadFileRes.data)
						if(res.meta.status == 0) return uni.$showMsg(res.meta.msg);
						if(_this.userInfo.token){
							res.data['token'] = _this.userInfo.token
						}
						_this.updateUserInfo(res.data)
						uni.$showMsg(res.meta.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
				})
				// uni.previewImage({
				// 	urls: [e.tempFilePath],
				// 	current: 0
				// });
			}
		}
	};
</script>
 
<style lang="scss" scoped>
	.settingHeadImage {
		background-color: #000000;
		overflow: hidden;
 
		.pre-canvas {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 20;
		}
 
		.preImage {
			min-width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			z-index: 1;
 
			.pre-i {
				// transition: all 0.1s;
			}
		}
 
		.setting-btns {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 20;
			font-size: 14px;
			color: #ffffff;
		}
	}
</style>